<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/webuploader.css">
    <script src="../../js/lib/jquery.js"></script>
    <script src="../../js/lib/webuploader.min.js"></script>
    <script src="../../js/main.js"></script>
    <script type="text/javascript">
        function preImg(sourceId, targetId) {
            if (typeof FileReader === 'undefined') {
                alert('Your browser does not support FileReader...');
                return;
            }
            var reader = new FileReader();

            reader.onload = function(e) {
                var img = document.getElementById(targetId);
                img.src = this.result;
            }
            reader.readAsDataURL(document.getElementById(sourceId).files[0]);
        }
    </script>
</head>
<body>
<div class="head whiteFont col-sm-12">
    <div class="content1 col-sm-offset-8 col-sm-4">
        <div class="col-sm-3">
            <label>首页</label>
        </div>
        <div class="col-sm-3">
            <label>拍摄规范</label>
        </div>
        <div class="col-sm-3">
            <label>系统设置</label>
        </div>
        <div class="col-sm-3">
            <label>联系我们</label>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="horizontal col-sm-12"></div>
    <div class="vertical col-sm-4"></div>
    <div class="left col-sm-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#">上传照片</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
            <li><a>正在审核</a></li>
            <li><a>历史审核</a></li>
        </ul>
        <div class="col-sm-offset-5">
            <img src="/images/tmri.jpg">/
        </div>
    </div>
    <div class="vertical col-sm-1"></div>
    <div class="middle col-sm-4">
        <div class="header col-sm-12">照片上传</div>
        <div class="col-sm-8">
            <form id="myForm" class="form-horizontal" method="post" action="/uploadImg" enctype="multipart/form-data">
                <div class="form-group">
                    <label class="label-control col-sm-4">相片规格</label>
                    <label class="label-control col-sm-8">机动车驾驶证</label>
                </div>
                <div class="form-group">
                    <label class="label-control col-sm-4">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                    <div class="col-sm-8">
                        <input />
                    </div>
                </div>
                <div class="form-group">
                    <label class="label-control col-sm-4">身份证号</label>
                    <div class="col-sm-8">
                        <input />
                    </div>
                </div>
                <div class="form-group">
                    <label class="label-control col-sm-4">验&nbsp;&nbsp;证&nbsp;&nbsp;码</label>
                    <div class="col-sm-8">
                        <input />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input id="sourceId" name="file" type="file" accept="image/bmp,image/gif,image/jpeg,image/jpg,image/png" value="选择图片" onchange="preImg(this.id, 'targetId')"/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-12">
                        <input id="uploadImg" type="submit" class="btn btn-primary" value="上传">
                    </div>
                </div>
            </form>
        </div>
        <div class="col-sm-4">
            <img id="targetId" src="../../images/ex.jpg" style="width: 350px;height: 550px">
        </div>
        <div>
            <table class="table">
                <tr>
                    <td>机动车驾驶证数码相片回执</td>
                    <td><img src="../../images/tmri.jpg"></td>
                </tr>
                <tr>
                    <td>是否有回执</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>像&nbsp;素&nbsp;大&nbsp;&nbsp;小</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>文&nbsp;件&nbsp;大&nbsp;&nbsp;小</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>分&nbsp;&nbsp;&nbsp;&nbsp;辨&nbsp;&nbsp;&nbsp;&nbsp;率</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>色&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;彩</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>背&nbsp;&nbsp;&nbsp;&nbsp;景&nbsp;&nbsp;&nbsp;&nbsp;色</td>
                    <td>有</td>
                </tr>
                <tr>
                    <td>其&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;它</td>
                    <td>有</td>
                </tr>
            </table>
        </div>
    </div>
    <div class="vertical col-sm-1"></div>
    <div class="right col-sm-4">
        <label class="header label-control col-sm-12">上传照片注意事项</label>
        <div class="col-sm-offset-2 col-sm-10">
            <img src="/images/eg.jpg">
        </div>
        <table class="table">
            <tr>
                <td>机动车驾驶证数码相片回执</td>
                <td></td>
            </tr>
            <tr>
                <td>人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;像</td>
                <td>人像清晰，轮廓分明，层次丰富，神态自然</td>
            </tr>
            <tr>
                <td>表&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情</td>
                <td>表情自然，避免漠视表情、僵硬的笑容或夸张表情</td>
            </tr>
            <tr>
                <td>着&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;装</td>
                <td>不着制式服装，着深色上衣</td>
            </tr>
            <tr>
                <td>佩&nbsp;戴&nbsp;眼&nbsp;镜</td>
                <td>常戴眼镜的居民应佩戴眼镜</td>
            </tr>
            <tr>
                <td>耳&nbsp;戴&nbsp;饰&nbsp;物</td>
                <td>人面部应可见，不应有遮盖面部的覆盖物</td>
            </tr>
            <tr>
                <td>光&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;线</td>
                <td>在脸部或背景上无阴影、亮点或者反光</td>
            </tr>
            <tr>
                <td>姿&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;势</td>
                <td>不宜抬头过高，向左右歪斜角度过大</td>
            </tr>
        </table>
        <!--<input class="col-sm-offset-4 btn btn-primary" value="更多注意事项">-->
    </div>
</div>
<div class="footer whiteFont col-sm-12">
    <label class="col-sm-offset-4 label-control col-sm-8">公安部交通管理科学研究所 &nbsp;&nbsp;&nbsp;联系电话&nbsp;0510&nbsp;85511999</label>
    <label class="col-sm-offset-4 label-control col-sm-8">江苏省无锡市滨湖区钱荣路88号 &nbsp;&nbsp;&nbsp;网址&nbsp;http://www.tmri.cn</label>
</div>
</body>
</html>